<template>
	<div class="food" v-show="showFlag" transition="move" v-el:food>
		<div class="food-content">
			<div class="image-header">
				<img :src="food.image" />
				<div class="back" @click="hide">
					<i class="icon-arrow_lift">返回</i>
				</div>
			</div>
			<div class="content">
				<h1 class="title">{{food.name}}</h1>
				<div class="detail">
					<span class="sell-count">月售{{food.sellCount}}份</span>
					<span class="rating">好评率{{food.rating}}%</span>
				</div>
				<div class="price">
					<span class="now">￥{{food.price}}</span>
					<span class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
				</div>
				<div class="cartcontrol-wrapper">
					<cart-control :food="food"></cart-control>
				</div>
				<div class="buy" transition="fade" v-show="!food.count || food.count===0" @click.stop.prevent="addFirst">加入购物车</div>
			</div>
			<split></split>
			<div class="info" v-show="food.info">
				<h1 class="title">商品信息</h1>
				<p class="text">{{food.info}}</p>
			</div>
			<split></split>
			<div class="rating">
				<h1 class="title">商品评价</h1>
				<rating-select :select-type="selectType" :only-content="onlyContent" :desc="desc" :ratings="food.ratings"></rating-select>
				<div class="rating-wrapper">
					<ul v-show="food.ratings && food.ratings.length">
						<li v-show="needShow(rating.rateType,rating.text)" class="rating-item" v-for="rating in food.ratings">
							<div class="user">
								<span class="name">{{rating.username}}</span>
								<img class="avatar" :src="rating.avatar" width="12" height="12" />
							</div>
							<div class="time">{{rating.rateTime | formatDate}}</div>
							<p class="text">
								<span :class="{'icon-thumb_up':rating.rateType===0,'icon-thumb_down':rating.rateType===1}">{{rating.text}}</span>
							</p>
						</li>
					</ul>
					<div class="no-rating" v-show="!food.ratings || !food.ratings.length">暂无评价</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import BScroll from 'better-scroll';
	import Vue from 'vue';
	import {formatDate} from 'common/js/date';
	import cartControl from 'components/cartControl/cartControl';
	import split from 'components/split/split';
	import ratingSelect from 'components/ratingSelect/ratingSelect';
	//正向评价
	const POSITIVE = 0;
	//负面评价
	const NEGATIVE = 1;
	//所有评价
	const ALL = 2;

	export default {
		props:{
			food:{
				type:Object
			}
		},
		data() {
			return {
				showFlag:false,
				selectType:ALL,
				onlyContent:true,
				desc:{
					all:'全部',
					positive:'推荐',
					negative:'吐槽'
				}
			}
		},
		computed:{

		},
		methods:{
			show(){
				this.showFlag = true;
				this.selectType = ALL;
				this.onlyContent = true;
				this.$nextTick(()=>{
					if(!this.scroll){
						this.scroll = new BScroll(this.$els.food,{
							click: true
						});
					}else{
						this.scroll.refresh();
					}
				});
			},
			hide(){
				this.showFlag = false;
			},
			addFirst(event){
				if(!event._constructed){
					return;
				}
				this.$dispatch('cart.add',event.target);
				Vue.set(this.food,'count',1);
			},
			needShow(type,text){
				if(this.onlyContent && !text){
					return false;
				}
				if(this.selectType === ALL){
					return true;
				}else{
					return type === this.selectType;
				}
			}
		},
		components:{
			cartControl,
			split,
			ratingSelect
		},
		events:{
			'ratingtype.select'(type){
				this.selectType = type;
				this.$nextTick(()=>{
					this.scroll.refresh();
				})
			},
			'content.toggle'(onlyContent){
				this.onlyContent = onlyContent;
				this.$nextTick(()=>{
					this.scroll.refresh();
				})
			}
		},
		filters:{
			formatDate(time){
				let date = new Date(time);
				return formatDate(date,'yyyy-MM-dd hh:mm');
			}
		}
	}
</script>

<style rel="stylesheet/scss" lang="scss">
	.food{
		position: fixed;
		left: 0;
		top: 0;
		bottom: 48px;
		z-index: 30;
		width: 100%;
		background: #fff;
	}
	.food.move-transition{
		transform: translate3d(0,0,0);
		transition: all .2s linear;
	}
	.food.move-enter,.food.move-leave{
		transform: translate3d(100%,0,0);
	}
	.food-content{
		.image-header{
			position: relative;
			width: 100%;
			height: 0;
			padding-top: 100%;
			img{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
			.back{
				position: absolute;
				left: 0px;
				top: 10px;
				.icon-arrow_lift{
					display: block;
					color: #fff;
					padding: 10px;
					font-size: 18px;
					font-style: normal;
				}
			}
		}
		.content{
			padding: 18px;
			position: relative;
			.title{
				line-height: 14px;
				margin-bottom: 8px;
				font-size: 14px;
				font-weight: 700;
				color: rgb(7,17,27);
			}
			.detail{
				margin-bottom: 18px;
				height: 10px;
				line-height: 10px;
				font-size: 0;
				.sell-count,.rating{
					font-size: 10px;
					color: rgb(147,153,159);
				}
				.sell-count{
					margin-right: 12px;
				}
				.price{
					font-weight: 700;
					line-height: 24px;
					.now{
						margin-right: 8px;
						font-size: 14px;
						color: rgb(240,20,20);
					}
					.old{
						text-decoration: line-through;
						font-size: 10px;
						color: rgb(147,153,159);
					}
				}
			}
			.cartcontrol-wrapper{
				position: absolute;
				right: 12px;
				bottom: 12px;
			}
			.buy{
				position: absolute;
				right: 18px;
				bottom: 18px;
				z-index: 10;
				line-height: 24px;
				padding: 0 12px;
				box-sizing: border-box;
				border-radius: 12px;
				font-size: 10px;
				color: #fff;
				background: rgb(0,160,220);
				&.fade-transition{
					opacity: 1;
					transition: all .2s linear;
				}
				&.fade-enter,&.fade-leave{
					opacity: 0;
				}
			}
		}
	}
	.info{
		padding: 18px;
		.title{
			line-height: 14px;
			margin-bottom: 6px;
			font-size: 14px;
			color: rgb(7,17,27);
		}
		.text{
			line-height: 24px;
			padding: 0 8px;
			font-size: 12px;
			color: rgb(77,85,93);
		}
	}
	.rating{
		padding-top: 18px;
		.title{
			line-height: 14px;
			margin-left: 18px;
			font-size: 14px;
			color: rgb(7,17,27);
		}
		.rating-wrapper{
			padding: 0 18px;
			.rating-item{
				position: relative;
				padding: 16px 0;
				border-bottom: 1px solid rgba(7,17,27,0.1);
				.user{
					position: absolute;
					right: 0;
					top: 16px;
					font-size: 0;
					line-height: 12px;
					.name{
						display: inline-block;
						vertical-align: top;
						margin-right: 6px;
						font-size: 10px;
						color: rgb(147,153,159);
					}
					.avatar{
						border-radius: 50%;
					}
				}
				.time{
					margin-bottom: 6px;
					line-height: 12px;
					font-size:10px;
					color: rgb(147,153,159);
				}
				.text{
					line-height:16px;
					font-size:12px;
					color:rgb(7,17,27);
					.icon-thumb_up,.icon-thumb_down{
						line-height: 16px;
						margin-right: 4px;
						font-size:12px;
					}
					.icon-thumb_up{
						color:rgb(0,160,220);
					}
					.icon-thumb_down{
						color: rgb(147,153,159);
					}
				}
			}
			.no-rating{
				padding: 16px 0;
				font-size: 12px;
				color: rgb(147,153,159);
			}
		}
	}
</style>